<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<html >
<head>
    <meta charset="UTF-8">
    <title>Login - Online Judge</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="css/styles.css" >
    <script src="js/jquery-1.7.2.js"></script>
    <script src="js/gdoj.js"></script>
</head>
<body>
<div th:replace="common::web-navbar"></div>
<div class="container">
    <div class="content">
        <div class="roundbox" style="width: 420px;margin: 68px auto;">
            <div class="roundbox-title">
                <div class="titled">[[#{login}]]</div>
            </div>
            <div class="register-box">
                <table class="table-form">
                    <tr>
                        <td colspan="2" class="input">
                            <label for="handle"></label><input class="register-box-input" id="handle" name="username" maxlength="30" th:placeholder="#{login.username}" value=""/>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input class="register-box-input" id="password" name="password" maxlength="30" th:placeholder="#{login.password}" type="password"  value=""/>
                        </td>
                    </tr>
                    <tr class="subscription-row">
                        <td colspan="2">
                            <div class="shiftUp">
                                <span class="fielderror"></span>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" align="right">
                            <input id="remember" style="top:0.25em;" type="checkbox"  checked="checked" name="remember"/>[[#{login.remember}]]
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <div>
                                <input class="register-box-submit login-box-submit" id="sub" type="Submit" th:value="#{login}"/>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <div style="text-align: right; margin-bottom: -16px;"><a href="registration">[[#{login.register}]]</a> | <a href="password-recovery">[[#{login.recovery}]]</a></div>
                        </td>
                    </tr>

                </table>
                <span class="third-party-title"> &nbsp;&nbsp;[[#{login-with-third-part-account}]]&nbsp; </span>
                <table class="table-form" style="">
                    <tr>
                        <td align="center">
                            <a th:href="'https://github.com/login/oauth/authorize?client_id=' + ${githubClientID}">
                                <img class="third-party-logo" src="img/github.jpeg" th:title="#{login-with-github}" th:alt="#{login-with-github}">
                            </a>&nbsp;&nbsp;
                            <a th:href="'https://gitee.com/oauth/authorize?client_id=' + ${giteeClientID} + '&redirect_uri=' + ${giteeRedrectUrl} + '&response_type=code'">
                                <img class="third-party-logo" src="img/gitee.jpeg" th:title="#{login-with-gitee}" th:alt="#{login-with-gitee}"></a>
                            </a>
                        </td>
                    </tr>
                    <tr class="subscription-row">
                        <td colspan="3" ><div class="shiftUp"></div></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <div th:replace="common::web-footer"></div>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        var formSubmitListener = function () {
            var username = $("input[name=username]").val();
            var password = $("input[name=password]").val();
            var dataReq = {
                "username": username,
                "password": password,
            }
            register = function () {
                var errMsg = ""
                $.ajax({
                    url: "/api/login" ,
                    type: "POST" ,
                    contentType : 'application/json',
                    data: JSON.stringify(dataReq),
                    success:function (data) {
                        if (data.code != 200) {
                            $(".fielderror").html(data.msg);
                        } else {
                            window.location = data.data;
                        }
                    },
                    error:function () {
                    },
                    dataType:"json"
                })
            };
            register();
            return false;
        }

        $(".login-box-submit").click(function(){
            formSubmitListener()
        });
    });
</script>
</body>
</html>
